<template>
    <view class="content">
        <view class="bg-view"></view>
        <!-- 个人信息 -->
        <view class="user-info">
            <view class="info-box" @click="showUserInfo">
                <view class="left">
                    <view class="head-box">
                        <image class="img" :src="avatar" mode="aspectFill"></image>
                    </view>
                    <view class="info">
                        <text class="name">{{nickName}}</text>
                        <text class="title">{{postNames}}</text>
                    </view>
                </view>
                <image class="right" src="../../static/images/right_arrow.png" mode="aspectFill"></image>
            </view>
            <!-- 公司 -->
            <view class="comp-info">
                <image class="img" src="../../static/images/icon_comp.png" mode="aspectFill"></image>
                <text class="text">{{deptName}}</text>
            </view>
        </view>
        <view class="module-box" v-if="role=='总经理'||role=='董事长'">
            <view class="head-box">
                <!-- <image class="img" src="../../static/images/icon_cust_mana.png" mode="aspectFill"></image> -->
                <text class="text">常用功能</text>
            </view>
            <view class="menu-box">
                <view v-if="0" class="munu-item" @click="navTo('/pages/user/qrcode')">
                    <image class="img" src="/static/tgm.png" mode="aspectFill"></image>
                    <text class="text">推广码</text>
                </view>
                <view v-if="role=='总经理'||role=='董事长'" class="munu-item" @click="navTo('/pages/user/upvideo')">
                    <image class="img" src="/static/upV.png" mode="aspectFill"></image>
                    <text class="text">上传视频</text>
                </view>

                <!-- <view class="munu-item" @click="navTo('../customer/fullCustomer')">
					<image class="img" src="../../static/icon/full_customer.png" mode="aspectFill"></image>
					<text class="text">公海客户</text>
				</view> -->
                <!-- <view class="munu-item" @click="switchTo('../customer/index')">
                    <image class="img" src="../../static/icon/customer.png" mode="aspectFill"></image>
                    <text class="text">客户</text>
                </view>
                 <view class="munu-item" @click="navTo('./nearbyCust/index')">
					<image class="img" src="../../static/icon/fj_customer.png" mode="aspectFill"></image>
					<text class="text">附近的客户</text>
				</view> -->
                <!-- <view class="munu-item" @click="navTo('./product/productList')">
					<image class="img" src="../../static/icon/product.png" mode="aspectFill"></image>
					<text class="text">产品</text>
				</view> 
                <view class="munu-item" @click="navTo('./contract/index')">
                    <image class="img" src="../../static/icon/ht.png" mode="aspectFill"></image>
                    <text class="text">合同</text>
                </view>
                <view class="munu-item" @click="navTo('./receivables/index')">
                    <image class="img" src="../../static/icon/log.png" mode="aspectFill"></image>
                    <text class="text">回款管理</text>
                </view>

                <view class="munu-item" @click="navTo('./users/users')">
                    <image class="img" src="../../static/icon/users.png" mode="aspectFill"></image>
                    <text class="text">通讯录</text>
                </view>
                <view class="munu-item" @click="navTo('./followRecord/index')">
                    <image class="img" src="../../static/icon/log.png" mode="aspectFill"></image>
                    <text class="text">跟进记录</text>
                </view>
                <view class="munu-item" @click="navTo('./audit/audit')">
                    <image class="img" src="../../static/icon/audit.png" mode="aspectFill"></image>
                    <text class="text">审批</text>
                </view>
                -->

            </view>
        </view>
        <!-- 关于我们、设置 -->
        <view class="set-box">
            <view class="item" @click="navTo('./about/about')">
                <view class="left">
                    <image class="img" src="../../static/images/icon_about_us.png" mode="aspectFill"></image>
                    <text class="text">关于我们</text>
                </view>
                <image class="right" src="../../static/images/right_arrow.png" mode="aspectFill"></image>
            </view>
            <view style="height: 1px;background-color: #F7F7F7;"></view>
            <view class="item" @click="navTo('./config/config')">
                <view class="left">
                    <image class="img" src="../../static/images/icon_set.png" mode="aspectFill"></image>
                    <text class="text">设置</text>
                </view>
                <image class="right" src="../../static/images/right_arrow.png" mode="aspectFill"></image>
            </view>
        </view>
    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                avatar: "../../static/images/my_img.png",
                nickName: "",
                deptName: "",
                postNames: "",
                role: ''
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            });


        },
        onShow() {
            this.role = this.getS('role')
            if (!this.utils.checkLoginState()) {
                uni.reLaunch({
                    url: '/pages/common/login'
                })
            } else {
                this.getUserInfo();
            }
            if (this.getS('token')) {
                api.getResMsgCount().then(r => {
                    console.log('未读消息', r);
                    if (r.counts - 0 <= 0) return
                    uni.setTabBarBadge({
                        index: 2,
                        text: r.counts + ''
                    })
                })
            }
        },
        methods: {
            navTo(url) {
                uni.navigateTo({
                    url
                })
            },
            getUserInfo() {
                var data = {};
                var that = this;
                api.getUserInfo(data).then(
                    res => {
                        console.log(res)
                        that.nickName = res.user.nickName;
                        that.deptName = res.user.dept.deptName;
                        that.posts = res.post;
                        that.postNames = res.role.roleName
                        // if (res.post != null && res.post.length > 0) {
                        //     var postNameStr = "";
                        //     res.post.forEach((v, i) => {
                        //         console.log(3, v);
                        //         postNameStr += v + ",";
                        //     }, this);
                        //     that.postNames = postNameStr.substr(0, postNameStr.length - 1);

                        // }
                        if (!that.utils.isEmpty(res.user.avatar)) {
                            that.avatar = uni.getStorageSync('requestPath') + res.user.avatar;
                        }

                    },
                    rej => {}
                );
            },
            // 查看用户详情
            showUserInfo() {
                uni.navigateTo({
                    url: './userInfo'
                })
            },
            switchTo(url) {
                uni.switchTab({
                    url: url
                })
                return
            },
            // 跳转页面
            navTo(url) {
                uni.navigateTo({
                    url: url
                })
            }

        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 20upx 24upx;
        position: relative;

        .bg-view {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 160upx;
            // background: linear-gradient(to right, #1CB4FF,#1D5BFC);
            background: #39b54a;
        }

        // 个人信息
        .user-info {
            background: #fff;
            border-radius: 10upx;
            padding: 0 30upx;

            .info-box {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20upx 0;

                    .head-box {
                        width: 100upx;
                        height: 100upx;
                        line-height: 100upx;
                        font-size: 28upx;
                        color: #fff;
                        text-align: center;
                        margin-right: 20upx;

                        .img {
                            border-radius: 50%;
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .info {
                        height: 80upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .name {
                            font-size: 28upx;
                            color: #000;
                        }

                        .title {
                            font-size: 24upx;
                            color: #666;
                        }
                    }
                }

                .right {
                    width: 20upx;
                    height: 34upx;
                }
            }

            .comp-info {
                padding: 20upx 0;
                display: flex;
                align-items: center;

                .img {
                    width: 30upx;
                    height: 30upx;
                    margin-right: 20upx;
                }

                .text {
                    font-size: 28upx;
                    color: #666;
                }
            }
        }

        // 功能模块
        .module-box {
            margin-top: 30upx;
            border-radius: 10upx;
            background: #fff;

            .head-box {
                padding: 20upx 30upx;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #F7F7F7;

                .img {
                    width: 40upx;
                    height: 40upx;
                    margin-right: 15upx;
                }

                .text {
                    font-size: 28upx;
                    color: #000;
                }
            }

            .menu-box {
                display: flex;
                flex-wrap: wrap;

                .munu-item {
                    width: 25%;
                    height: 200upx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .img {
                        width: 80upx;
                        height: 80upx;
                        margin-bottom: 20upx;
                    }

                    .text {
                        font-size: 28upx;
                        color: #000;
                    }
                }
            }
        }

        // 关于我们、设置
        .set-box {
            margin-top: 30upx;
            border-radius: 10upx;
            background: #fff;
            padding: 0 40upx;

            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 25upx 0;

                .left {
                    display: flex;
                    align-items: center;

                    .img {
                        width: 30upx;
                        height: 30upx;
                        margin-right: 10upx;
                    }

                    .text {
                        font-size: 30upx;
                        color: #666;
                    }
                }

                .right {
                    width: 20upx;
                    height: 34upx;
                }
            }
        }
    }
</style>